import React, { Component } from 'react'
import { Card, Table, Button, message, Modal, Form, Select, Input } from 'antd'
import { PlusOutlined, ArrowRightOutlined } from "@ant-design/icons"
import LinkButton from '../../components/link-button'
import { reqCategorys, reqUpdateCategory, reqAddCategory } from '../../api'

export default class Category extends Component {

  state = {
    loading: false, // 是否正在获取数据中
    categorys: [], // 一级分类列表
    subCategorys: [], // 二级分类列表
    parentId: '0', // 当前需要显示的分类列表的父分类id
    parentName: '', // 当前需要显示的分类列表的父分类名称
    showStatus: 0, // 标识添加/更新的确认框是否显示，0：都不显示，1：显示添加，2：显示更新
    category: [],
    categoryName: '',
    categoryId: ''
  }

  // 初始化Table所有数组
  initColumns = () => {
    this.columns = [
      {
        title: '分类名称',
        dataIndex: 'name',
      },
      {
        title: '操作',
        width: 500,
        render: (category) => (
          <span>
            <LinkButton onClick={() => this.showUpdate(category)}>修改分类</LinkButton>
            {this.state.parentId === '0' ? <LinkButton onClick={() => { this.showSubCategorys(category) }}>查看子分类</LinkButton> : null}
          </span>
        )
      }
    ];
  }

  // 显示一级分类列表
  showCategorys = () => {
    this.setState({
      parentId: '0',
      parentName: '',
      subCategorys: []
    })
  }

  // 显示指定一级分类对象的二级列表
  showSubCategorys = (category) => {
    // 更新状态
    this.setState({
      parentId: category._id,
      parentName: category.name
    }, () => { // 在状态更新且重新render()后执行
      // 获取二级分类列表
      this.getCategorys()

      // setState()不能立即获取最新的状态：因为setState()是异步更新状态的
    })
  }

  // 隐藏确认框
  handleCancel = () => {
    this.setState({
      showStatus: 0
    })
  }

  // 显示添加的确认框
  showAdd = () => {
    this.setState({
      showStatus: 1
    })
  }

  // 添加分类
  addCategory = async () => {
    this.setState({
      showStatus: 0
    })

    const parentId = this.state.categoryId
    const categoryName = this.state.categoryName

    // 发请求添加分类
    const result = await reqAddCategory({ parentId, categoryName })
    if (result.data.status === 0) {
      message.success('添加成功')
    } else {
      message.error('添加失败')
    }

    // 重新显示列表
    this.getCategorys()
  }

  // 显示更新的确认框
  showUpdate = (category) => {
    // 保存分类对象
    this.setState({
      category: category,
      showStatus: 2
    })
  }

  // 更新分类
  updateCategory = async () => {
    this.setState({
      showStatus: 0
    })

    const categoryId = this.state.category._id
    const categoryName = this.state.categoryName

    // 发请求更新分类
    const result = await reqUpdateCategory({ categoryId, categoryName })
    if (result.data.status === 0) {
      message.success('修改成功')
    } else {
      message.error('修改失败')
    }

    // 重新显示列表
    this.getCategorys()
  }

  // 异步获取一级/二级分类列表显示
  getCategorys = async () => {
    // 显示loading
    this.setState({ loading: true })
    const { parentId } = this.state

    const { data: result } = await reqCategorys(parentId)
    // 隐藏loading
    this.setState({ loading: false })

    if (result.status === 0) {
      // 分类数组（一级 / 二级）
      const categorys = result.data
      // 更新一级分类
      if (parentId === '0') {
        this.setState({
          categorys: categorys
        })
      } else {
        // 更新二级分类
        this.setState({
          subCategorys: categorys
        })
      }
    } else {
      message.error('获取分类列表失败')
    }
  }

  change = (e) => {
    this.setState({
      categoryName: e.target.value
    })
  }

  selectchange = (e) => {
    this.setState({
      categoryId: e
    })
  }

  // 为第一次render()准备数据
  componentWillMount() {
    this.initColumns()
  }

  // 发异步ajax请求
  componentDidMount() {
    this.getCategorys()
  }



  render() {
    // 读取状态数据
    const { categorys, subCategorys, parentId, parentName, loading, showStatus, category } = this.state

    // card左侧标题
    const title = parentId === '0' ? '一级分类列表' : (
      <span>
        <LinkButton onClick={this.showCategorys}>一级分类列表</LinkButton>
        <ArrowRightOutlined style={{ marginRight: 5 }} />
        <span>{parentName}</span>
      </span>
    )
    // card右侧按钮
    const extra = (
      <Button type="primary" onClick={this.showAdd}>
        <PlusOutlined />
        添加
      </Button>
    )

    this.Cname = category.name

    return (
      <Card title={title} extra={extra}>
        <Table rowKey='_id' dataSource={parentId === '0' ? categorys : subCategorys} columns={this.columns} pagination={{ defaultPageSize: 5, showQuickJumper: true }} loading={loading} bordered />
        <Modal title="添加分类" visible={showStatus === 1} onOk={this.addCategory} onCancel={this.handleCancel}>
          <Form>
            <Form.Item label="所属分类" name="parentId">
              <Select onChange={this.selectchange}>
                <Select.Option value='0'>一级分类</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item label="分类名称" name="categoryName">
              <Input placeholder='请输入分类名称' onChange={this.change} />
            </Form.Item>
          </Form>
        </Modal>

        <Modal title="更新分类" visible={showStatus === 2} onOk={this.updateCategory} onCancel={this.handleCancel}>
          <Form>
            <Form.Item>
              <Input placeholder='请输入分类名称' key={this.Cname} defaultValue={this.Cname} onChange={this.change} />
            </Form.Item>
          </Form>
        </Modal>
      </Card>
    )
  }
}